/*
 * @Author: wangcb
 * @Email: wangcbgg@163.com
 * @Date: 2021-08-27 17:43:38
 * @LastEditTime: 2021-11-17 11:09:50
 * 加载loader
 */
import { $ } from "../helpers/selector";
import { supportCss3 } from "../helpers/util";
/**
 * Loader类
 * @class Loader
 */
class Loader {
    constructor(config) {
        /**
         * 唯一标识
         * @type {string}
         */
        this.id = 'loader';
        /**
         * 持有的dom元素
         * @type {ExtendHTMLElement}
         */
        this.element = null;
        /**
         * 容器元素
         * @type {ExtendHTMLElement}
         * @default body
         */
        this.container = document.body;
        /**
         * 定位left值
         * @type {number | string}
         * @default 50%
         */
        this.left = '50%';
        /**
         * 定位top值
         * @type {number | string}
         * @default 50%
         */
        this.top = '50%';
        /**
         * 尺寸
         * @type {number}
         * @default 200
         */
        this.size = 200;
        /**
         * 颜色
         * @type {string}
         * @default '#ffffff'
         */
        this.color = '#ffffff';
        /**
         * 层级
         * @type {number}
         * @default 999
         */
        this.zIndex = 999;
        if (config) {
            if (config.id)
                this.id = config.id;
            if (config.container)
                this.container = config.container;
            if (config.left)
                this.left = typeof config.left === 'number' ? config.left + 'px' : config.left;
            if (config.top)
                this.top = typeof config.top === 'number' ? config.top + 'px' : config.top;
            if (config.size)
                this.size = config.size;
            if (config.color)
                this.color = config.color;
            if (config.zIndex)
                this.zIndex = config.zIndex;
        }
        const id = `${this.id}-${Loader.timestamp}`;
        if (!$(id)) {
            this.element = document.createElement('div');
            this.element.id = id;
            this.element.style.visibility = 'hidden';
            this.element.style.cssText = `visibility:hidden;width:${this.size}px;height:${this.size}px;left:${this.left};top:${this.top};margin:-${Math.floor(this.size / 2)}px;z-index:${this.zIndex}`;
            this.container.appendChild(this.element);
        }
        else
            this.element = $(id);
        if (supportCss3('transform')) {
            this.$init();
            this.element.className = id + ' loader-' + Loader.timestamp + '-paused';
        }
        else {
            const style = `position:absolute;margin:-20px -${Math.floor(this.size / 5)}px;left:${this.left};top:${this.top};z-index:${this.zIndex};color:${this.color};font-size:${Math.floor(this.size / 5)}px`;
            this.element.innerHTML = `<h3 style="${style}">Loading...</h3>`;
        }
    }
    /**
     * 初始化样式
     * @private
     */
    $init() {
        const head = document.getElementsByTagName('head')[0];
        const loaderId = '-loader-id-';
        if (!$(loaderId)) {
            const style = document.createElement('style');
            style.type = 'text/css', style.id = loaderId;
            const css = `.loader-timestamp{border:0 solid transparent;border-radius:50%;position:absolute}.loader-timestamp:before,.loader-timestamp:after{content:"";border:.2em solid;border-radius:50%;width:inherit;height:inherit;position:absolute;top:0;left:0;-webkit-animation:loader-timestamp 1s linear infinite;animation:loader-timestamp 1s linear infinite;opacity:0}.loader-timestamp:before{-webkit-animation-delay:1s;animation-delay:1s}.loader-timestamp:after{-webkit-animation-delay:.5s;animation-delay:.5s}@-webkit-keyframes loader-timestamp{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}50%{opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}@keyframes loader-timestamp{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}50%{opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}.loader-timestamp-paused.loader-timestamp:after,.loader-timestamp-paused.loader-timestamp:before{-webkit-animation-play-state:paused;animation-play-state:paused}.loader-timestamp-running.loader-timestamp:after,.loader-timestamp-running.loader-timestamp:before{-webkit-animation-play-state:running;animation-play-state:running}`;
            if ('styleSheet' in style) { // @ts-ignore IE适配
                style.setAttribute('type', 'text/css'); // @ts-ignore IE适配
                style.styleSheet.cssText = css.replace(/timestamp/g, '' + Loader.timestamp);
            }
            else {
                // 避免样式类名冲突
                style.innerHTML = css.replace(/timestamp/g, '' + Loader.timestamp);
            }
            head.appendChild(style);
        }
    }
    /** 显示loader */
    show() {
        if (!this.element)
            return;
        if (supportCss3('transform')) {
            this.element.className = `loader-${Loader.timestamp} loader-${Loader.timestamp}-running`;
        }
        this.element.style.visibility = 'visible';
    }
    /** 隐藏loader */
    hide() {
        if (!this.element)
            return;
        if (supportCss3('transform')) {
            this.element.className = `loader-${Loader.timestamp} loader-${Loader.timestamp}-paused`;
        }
        this.element.style.visibility = 'hidden';
    }
}
/**
 * 当前时间戳
 * @static
 * @private
 */
Loader.timestamp = Date.now();
/**
 * loader配置定义
 * @typedef ILoaderConfig
 * @property {ExtendHTMLElement} [container=document.body] 容器元素
 * @property {number} [left='50%'] 定位left值
 * @property {boolean} [top='50%'] 定位top值
 * @property {boolean} [size='200'] 尺寸
 * @property {string} [radius='50%'] 圆角度
 * @property {string} [color='#ffffff'] 颜色
 * @property {boolean} [zIndex=999] 层级
 */
/**
 * 生成loader实例
 * @param {ILoaderConfig} [config] loader配置
 * @example
 * const loader = createLoader();// 使用默认配置
 * loader.show();// 显示loader
 * loader.hide();// 隐藏loader
 */
export function createLoader(config) {
    return new Loader(config);
}
